<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
import { getMoldDataStatisticsStatus } from '@/service/api/modules/workwear/mold-data-statistics';

defineOptions({
  name: 'LineChart'
});
const loading = ref(false);

const { domRef, updateOptions } = useEcharts(
  () => ({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    title: {
      text: `模具状态分布图`,
      left: 'center',
      top: 0
    },
    series: [
      {
        name: '模具状态分布图',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: []
      }
    ]
  }),
  false
);

async function getData() {
  loading.value = true;
  getMoldDataStatisticsStatus()
    .then(({ data, error }) => {
      if (!error) {
        const chartData = data.map(item => {
          const statusTextObj = {
            1: '正常',
            2: '报废',
            3: '暂停',
            4: '调出'
          };
          return {
            name: statusTextObj[item.moldState],
            value: item.punchTotal
          };
        });
        updateOptions(opts => {
          opts.series[0].data = chartData;
          return opts;
        });
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  getData();
});
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <ASpin tip="数据加载中..." :spinning="loading">
      <div ref="domRef" class="h-full overflow-hidden"></div>
    </ASpin>
  </ACard>
</template>

<style scoped>
.select-month {
  position: absolute;
  top: 0px;
  left: 10px;
}
</style>
